<template>
  <div class="info_container">
    <el-row :gutter="15">
      <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
        <div class="info_item project_desc" style="height:300px;">
          <div class="info_title">工程信息</div>
          <div class="name">{{project.title}}</div>
          <div class="info_desc">
            <div class="info_row">
              <el-form label-width="80px">
                <el-form-item label="工程金额" style="margin:0px;">
                  <p>{{project.money}}</p>
                </el-form-item>
                <el-form-item label="工程地址" style="margin:0px;">
                  <p>{{project.address}}</p>
                </el-form-item>
                <el-form-item label="工程节点" style="margin:0px;">
                  <div class="step_box">
                    <el-steps :active="1">
                      <el-step
                        v-for="(item,index) in nodeList"
                        :key="index"
                        :title="item.title"
                        :description="item.plan_date"
                      ></el-step>
                    </el-steps>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <div class="info_item" style="height:300px;">
          <div class="info_title">工程进度</div>
          <div class="plan_box">
            <el-progress type="circle" :percentage="25" :stroke-width="8"></el-progress>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <div class="info_item" style="height:250px;">
          <div class="info_title">工程责任书</div>
          <div class="file_box">
            <img src="@/assets/images/file.png" alt srcset />
            <p @click="showFile(1)">{{project.zrs_title}}</p>
            <div class="but_icon">
              <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                <i class="el-icon-edit" style="margin-right:10px;"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <i class="el-icon-delete"></i>
              </el-tooltip>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <div class="info_item" style="height:250px;">
          <div class="info_title">工程设计方案</div>
          <div class="file_box">
            <img src="@/assets/images/file.png" alt srcset />
            <p @click="showFile(2)">{{project.sjfa_title}}</p>
            <div class="but_icon">
              <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                <i class="el-icon-edit" style="margin-right:10px;"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <i class="el-icon-delete"></i>
              </el-tooltip>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <div class="info_item" style="height:250px;">
          <div class="info_title">工程验收标准</div>
          <div class="file_box">
            <img src="@/assets/images/file.png" alt srcset />
            <p @click="showFile(3)">{{project.ysbz_title}}</p>
            <div class="but_icon">
              <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                <i class="el-icon-edit" style="margin-right:10px;"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <i class="el-icon-delete"></i>
              </el-tooltip>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <div class="info_item" style="height:250px;">
          <div class="info_title">工程合同</div>
          <div class="file_box">
            <img src="@/assets/images/file.png" alt srcset />
            <p @click="showFile(4)">{{project.title}}</p>
            <div class="but_icon">
              <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                <i class="el-icon-edit" style="margin-right:10px;"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <i class="el-icon-delete"></i>
              </el-tooltip>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <div class="info_item" style="height:250px;">
          <div class="info_title">工程交付审核</div>
          <div class="file_box">
            <img src="@/assets/images/file.png" alt srcset />
            <p>云南锐联科技消防设置安装工程一期合同</p>
            <div class="but_icon">
              <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                <i class="el-icon-edit" style="margin-right:10px;"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <i class="el-icon-delete"></i>
              </el-tooltip>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <div class="info_item" style="height:250px;">
          <div class="info_title">工程验收审核</div>
          <div class="file_box">
            <img src="@/assets/images/file.png" alt srcset />
            <p>云南锐联科技消防设置安装工程一期合同</p>
            <div class="but_icon">
              <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                <i class="el-icon-edit" style="margin-right:10px;"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <i class="el-icon-delete"></i>
              </el-tooltip>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
        <div class="info_item">
          <div class="info_title">附属工程</div>
          <div class="info_table">
            <el-table :data="tableData" stripe style="width: 100%">
              <el-table-column type="index" width="50" label="#"></el-table-column>
              <el-table-column prop="title" label="工程名称" width="180"></el-table-column>
              <el-table-column prop="money" label="工程金额" width="150"></el-table-column>
              <el-table-column prop="address" label="工程地址" width="200"></el-table-column>
              <el-table-column prop="sjfa_title" label="设计方案" width="200"></el-table-column>
              <el-table-column prop="ysbz_title" label="验收标准" width="200"></el-table-column>
              <el-table-column prop="zrs_files" label="责任书" width="200"></el-table-column>
              <el-table-column prop="title" label="合同" width="200"></el-table-column>
              <el-table-column prop="create_time" label="创建日期" width="200"></el-table-column>
              <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                  <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <div class="info_item">
          <div class="title_row">
            <div class="info_title">工程节点</div>
            <div class="icon_box">
              <i class="el-icon-plus" @click="addModal() "></i>
            </div>
          </div>
          <div class="info_table">
            <el-table :data="nodeList" stripe style="width: 100%">
              <el-table-column type="index" width="50" label="#"></el-table-column>
              <el-table-column prop="title" label="节点名称" width="180"></el-table-column>
              <el-table-column prop="gravity" label="节点占比" width="100"></el-table-column>
              <el-table-column prop="plan_date" label="计划完成时间" width="100"></el-table-column>
              <el-table-column prop="status" label="完成状态" width="100"></el-table-column>
              <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                  <el-button size="mini" @click="nodeEdit(scope.row)">编辑</el-button>
                  <el-button size="mini" type="danger" @click="nodeDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
      <!-- 周报 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <div class="info_item">
          <div class="title_row">
            <div class="info_title">工程早会</div>
            <div class="icon_box">
              <i class="el-icon-plus"></i>
            </div>
          </div>
          <div class="table_box">
            <el-table border :data="morningList" style="width: 100%">
              <el-table-column prop="title" label="早会标题"></el-table-column>
              <el-table-column prop="date" label="创建时间" width="180"></el-table-column>
              <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                  <el-button size="mini">删除</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleShow(scope.$index, scope.row)"
                  >查看</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <div class="info_item">
          <div class="title_row">
            <div class="info_title">工程日报</div>
            <div class="icon_box">
              <i class="el-icon-plus"></i>
            </div>
          </div>
          <div class="table_box">
            <el-table border style="width: 100%">
              <el-table-column prop="date" label="日期" width="180"></el-table-column>
              <el-table-column prop="name" label="姓名" width="180"></el-table-column>
              <el-table-column prop="address" label="地址"></el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <div class="info_item">
          <div class="title_row">
            <div class="info_title">工程周报</div>
            <div class="icon_box">
              <i class="el-icon-plus"></i>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <div class="info_item">
          <div class="title_row">
            <div class="info_title">工程总结</div>
            <div class="icon_box">
              <i class="el-icon-plus"></i>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 预览文件模态框 -->
    <el-dialog
      :title="showForm.Pname"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose"
    >
      <el-form label-width="50px">
        <el-form-item label="名称">
          <el-input v-model="showForm.title"></el-input>
        </el-form-item>
        <el-form-item label="详情">
          <div class="html_box" v-html="showForm.htmlText"></div>
        </el-form-item>
        <el-form-item label="附件">
          <el-button type="primary" style="width:200px;">
            下载
            <i class="el-icon-upload el-icon--right"></i>
          </el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增节点模态框 -->
    <el-dialog title="新增节点" :visible.sync="nodeVisible" width="40%" :before-close="handleClose">
      <el-form label-width="80px">
        <el-form-item label="节点名称">
          <el-input v-model="nodeForm.title"></el-input>
        </el-form-item>
        <el-form-item label="节点占比">
          <el-input v-model="nodeForm.gravity" type="number"></el-input>
        </el-form-item>
        <el-form-item label="计划时间">
          <el-date-picker
            style="width:100%;"
            v-model="nodeForm.plan_date"
            type="datetime"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitNode">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
let moment = require("moment");
moment.locale("zh-cn"); //汉化
import {
  getProjectChild,
  addNode,
  getNodeList,
  deleteNode,
  editNode,
  getMorningText,
} from "@/api/project";
export default {
  data() {
    return {
      morningList: [],
      nodeList: [],
      nodeForm: {
        project_id: "",
        title: "",
        gravity: "",
        plan_date: "",
      },
      // 新增节点模态框
      nodeVisible: false,
      dialogVisible: false,
      project: {},
      //查询子菜单参数
      param: {
        id: "",
        title: "",
        page: 1,
        page_size: 10,
      },
      showForm: {
        code: "1",
        Pname: "项目名称",
        title: "文档",
        htmlText: "",
        fileList: [],
      },
      tableData: [],
    };
  },
  created() {
    var that = this;
    var info = that.$route.query.pageEvent;
    console.log(info);
    that.project = info;
    that.param.id = that.project.id;
    that.getChildList();
    that.getProjectNode();
    that.getMorningList();
  },
  mounted() {},
  methods: {
    async getMorningList() {
      var that = this;
      let param = {
        project_id: that.project.id,
      };
      const res = await getMorningText(param);
      console.log(res);
      if (res.data) {
        that.morningList = res.data;
      }
    },
    async submitNode() {
      console.log("提交节点");
      var that = this;
      let param = {};
      console.log(that.nodeForm);
      switch (that.nodeForm.code) {
        case 1:
          console.log("添加节点");
          param.project_id = that.project.id;
          param.plan_date = moment(that.nodeForm.plan_date).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          param.title = that.nodeForm.title;
          param.gravity = that.nodeForm.gravity;
          console.log(param);
          const res = await addNode(param);
          console.log(res);
          if (res.status == 1) {
            that.$message({
              message: "节点信息添加成功",
              type: "success",
            });
          }
          break;
        case 2:
          console.log("编辑节点");
          param.id = that.nodeForm.id;
          param.plan_date = moment(that.nodeForm.plan_date).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          param.title = that.nodeForm.title;
          param.gravity = that.nodeForm.gravity;
          console.log(param);
          const result = await editNode(param);
          console.log(result);
          that.nodeVisible = false;
          if (result.status == 1) {
            that.$message({
              message: "节点信息修改成功",
              type: "success",
            });
          }
        default:
          break;
      }
    },
    //删除节点
    async nodeDelete(event) {
      console.log(event);
      let param = {
        id: event.id,
      };
      const res = await deleteNode(param);
      console.log(res.data);
      if (res.status == 1) {
        that.$message({
          message: "节点信息删除成功",
          type: "success",
        });
      }
    },
    addModal() {
      this.nodeForm.code = 1;
      this.nodeVisible = true;
      console.log(this.nodeForm);
    },
    nodeEdit(event) {
      console.log(event);
      this.nodeForm = event;
      this.nodeForm.code = 2;
      console.log(this.nodeForm);
      this.nodeVisible = true;
    },
    //获取节点列表
    async getProjectNode() {
      var that = this;
      let value = {
        project_id: that.project.id,
      };
      const res = await getNodeList(value);
      console.log(res);
      if (res.data) {
        that.nodeList = res.data;
      }
    },
    //查看文件详情
    showFile(event) {
      console.log(event);
      var that = this;
      switch (event) {
        //责任书
        case 1:
          that.showForm.code = event;
          that.showForm.Pname = that.project.title;
          that.showForm.title = that.project.zrs_title;
          that.showForm.htmlText = that.project.zrs_content;
          that.showForm.fileList = that.project.zrs_files;
          console.log(that.showForm);
          that.dialogVisible = true;
          break;
        //设计方案
        case 2:
          that.showForm.code = event;
          that.showForm.Pname = that.project.title;
          that.showForm.title = that.project.sjfa_title;
          that.showForm.htmlText = that.project.sjfa_content;
          that.showForm.fileList = that.project.sjfa_files;
          console.log(that.showForm);
          that.dialogVisible = true;
          break;
        // 验收标准
        case 3:
          that.showForm.code = event;
          that.showForm.Pname = that.project.title;
          that.showForm.title = that.project.ysbz_title;
          that.showForm.htmlText = that.project.ysbz_content;
          that.showForm.fileList = that.project.ysbz_files;
          console.log(that.showForm);
          that.dialogVisible = true;
          break;
        case 4:
          that.showForm.code = event;
          that.showForm.Pname = that.project.title;
          that.showForm.title = that.project.title;
          console.log(that.showForm);
          that.dialogVisible = true;
          break;
        default:
          break;
      }
    },
    handleClose() {
      this.dialogVisible = false;
      this.nodeVisible = false;
    },
    //获取项目子项目
    async getChildList() {
      var that = this;
      const res = await getProjectChild(that.param);
      console.log(res);
      if (res.data) {
        that.tableData = res.data;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.table_box {
  border: 1px solid red;
}
.title_row {
  display: flex;
  flex-flow: row wrap;
  border-bottom: 1px solid #dbdbdb;
}
.icon_box {
  width: 20%;
  text-align: right;
  color: #d41d31;
  line-height: 30px;
  font-size: 20px;
}
.step_box {
  overflow: auto;
  height: 120px;
}

.html_box {
  height: 600px;
  overflow: auto;
  padding: 10px;
  border: 1px solid #dbdbdb;
}
.info_item {
  height: auto;
  margin-top: 15px;
  padding: 15px;
  background: #ffffff;
  .plan_box {
    margin-top: 50px;
    text-align: center;
  }
  .info_row {
    width: 100%;
  }
  .info_table {
    margin-top: 15px;
    overflow: auto;
    height: 230px;
  }
  .file_box {
    height: 35px;
    line-height: 30px;
    margin-top: 10px;
    img {
      width: 30px;
      height: 30px;
      float: left;
    }
    p {
      padding-left: 10px;
      line-height: 35px;
      float: left;
    }
    .but_icon {
      font-size: 20px;
      width: 100px;
      text-align: right;
      color: #d41d31;
      float: right;
    }
  }
  .info_title {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    width: 80%;
    padding-bottom: 10px;
  }
  .info_desc {
    margin-top: 10px;
    width: 100%;
  }
  .name {
    font-size: 20px;
    font-weight: 600;
    color: #d41d31;
    margin-top: 10px;
  }
}
.info_container {
  background: #f6f8f9;
}
</style>
